<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width， initial-scalem1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
  <!-- jquery->ajax与后台进行数据交互 -->
  <script src="./js/jquery.min.js"></script>
  <!-- vue生态中的axios -->
</head>

<body>
  <!-- 创建容器=》必须指定宽和高 -->
  <div id="main" style="width: 600px; height: 400px;"></div>

  <script>
    var chartDOM = document.getElementById('main')
    var myChart = echarts.init(chartDOM);
    var option;
    $.getJSON('./js/data2.json', function (json) {
      console.log(json)
      myChart.setOption(
        option = {
      title: {
        text: '复习课'
      },
      tooltip: {},
      series: [{
        type: 'graph',//定义类型
        layout: 'none',
        symbolSize: 50,
        label: {
          show: true,
        },
        edgeLabel: {
          formatter: "{c}",
          show: true,
        },
        //边的类型显示，一边⚪，一边→
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        //数据，一个一个节点
        data: json.xyz.map(function (json) {
          return {
            name: json.name,
            x: json.x,
            y: json.y,

          }

        }),

        // links: [],
        //谁和谁有关系
        edges: [
          {
            source: 0,
            target: 1,
            symbolSize: [5, 20],
            label: {
              show: true
            },
            value: '孩子',
            lineStyle: {
              width: 5,
              curveness: 0.2
            }
          },
          {
            source: 'Node 2',
            target: 'Node 1',
            label: {
              show: true
            },
            lineStyle: {
              curveness: 0.2
            },
            value: '你好',
          },
          {
            source: 'Node 1',
            target: 'Node 3'
          },
          {
            source: 'Node 2',
            target: 'Node 3'
          },
          {
            source: 'Node 2',
            target: 'Node 4'
          },
          {
            source: 'Node 1',
            target: 'Node 4'
          }
        ],
      }]
    })
    })
    


  </script>
</body>

</html>